<template>
    <div class="bodyDiv">
      <Header :position="position"></Header>
      <el-card style="height: 873px">
        <div slot="header" style="display: flex; justify-content: space-between;">
          <h3>
            用户管理
          </h3>
          <div>
            <el-input
              style="width: 500px;margin-right: 50px"
              placeholder="用户模糊搜索">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <el-button icon="el-icon-search" slot="append" style="width: 100px">搜索</el-button>
            </el-input>
              <el-button type="primary" @click="addUserDialog=true"><i class="el-icon-plus"></i> 添加用户</el-button>
              <el-button type="primary" @click="addManyDialog=true"><i class="el-icon-upload"></i> 批量导入用户</el-button>
          </div>
        </div>
        <!--表头：用户名、姓名、权限、操作（修改、删除、查看）-->
        <el-table :data="userList"
                  style="width: 100%;overflow-y: auto"
                  stripe
                  highlight-current-row
                  height="715px"
                  ref="tableList">
          <el-table-column label="ID" prop="id"></el-table-column>
          <el-table-column label="姓名" prop="name">
            <template slot-scope="scope">
              <span v-show="!scope.row.editable">{{scope.row.name}}</span>
              <el-input v-model="scope.row.name" size="mini" style="width: 50%" v-show="scope.row.editable"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="权限" prop="power">
            <template slot-scope="scope">
              <span v-show="!scope.row.editable">{{scope.row.power}}</span>
              <el-select v-model="scope.row.power" size="mini" style="width: 50%" v-show="scope.row.editable">
                <el-option>用户</el-option>
                <el-option>管理员</el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="small" @click="scope.row.editable=true" v-show="scope.row.editable===false">修改</el-button>
                <el-button size="small" @click="scope.row.editable=false" v-show="scope.row.editable===true">保存</el-button>
                <el-button size="small" type="danger">删除</el-button>
                <el-button type="primary" size="small">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 5px"></el-pagination>
      </el-card>
      <el-dialog
        title="添加用户"
        :modal-append-to-body="false"
        :visible.sync="addUserDialog"
        width="30%">
        <div style="width: 70%;margin: auto">
          <div class="formcolumn">
            输入用户名：<el-input style="width: 70%;"></el-input>
          </div>
          <div class="formcolumn">
            输入姓名：<el-input style="width: 70%;"></el-input>
          </div>
          <div class="formcolumn">
            输入密码：<el-input style="width: 70%;"></el-input>
          </div>
          <div class="formcolumn">
            选择权限：<div style="width: 70%"><el-select style="width: 70%;"></el-select></div>
          </div>
        </div>

        <div slot="footer" class="dialog-footer">
            <el-button @click="addUserDialog = false">取 消</el-button>
            <el-button type="primary" @click="addUserDialog = false">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog
        title="批量添加用户"
        :modal-append-to-body="false"
        :visible.sync="addManyDialog"
        width="30%">
        <div style="text-align:center;width: 100%">
          <div style="display: flex;justify-content: space-between;margin-left: 97px;margin-right: 85px">
            <p>模板：</p>
            <el-button style="width:150px;margin-bottom: 10px;float: right">点此下载模板文件</el-button>
          </div>

          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            style="margin-left: 8px"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </div>

        <div slot="footer" class="dialog-footer">
            <el-button @click="addManyDialog = false">取 消</el-button>
            <el-button type="primary" @click="addManyDialog = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
    import Header from "../../components/Header";
    export default {
        name: "User",
      components:{Header},
      data(){
          return{
            position:{
              secondTitle:'系统用户',
              thirdTitle:'用户'
            },
            addUserDialog:false,
            addManyDialog:false,
            userList:[
              {
                id:'01',
                name:'刘琦',
                power:'管理员',
                editable:false,
              },

            ]
          }
      }
    }
</script>

<style scoped>
  .bodyDiv{
    text-align: left;
  }
  .formcolumn{
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
